<template>
    <div style="margin-top: 20px;">
        <el-button type="primary" @click="drawer = true" circle icon="Plus" />
        <el-button type="primary" @click="onRemove" circle icon="Minus" />
        <el-table ref="multipleTableRef" :data="tableData" style="margin-top: 10px;"
            @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
            <el-table-column type="selection" :index="id" width="55" />
            <el-table-column property="name" label="名称" />
            <el-table-column property="dataType" label="驱动" />
            <el-table-column property="host" label="地址" />
            <el-table-column property="port" label="端口" />
            <el-table-column property="dbname" label="库名" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="greet(scope.row)" size="mini">
                        连接数据库
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-drawer v-model="drawer" :with-header="false" size="350px">
        <div class="dataSource">
            <el-select v-model="data.dataType" placeholder="请选择驱动" style="width: 260px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input v-model="data.name" style="max-width: 260px" placeholder="name">
                <template #prepend>名称</template>
            </el-input>
            <el-input v-model="data.host" style="max-width: 260px" placeholder="host">
                <template #prepend>地址</template>
            </el-input>
            <el-input v-model="data.port" style="max-width: 260px" placeholder="port">
                <template #prepend>端口</template>
            </el-input>
            <el-input v-model="data.dbname" style="max-width: 260px" placeholder="dbname">
                <template #prepend>库名</template>
            </el-input>
            <el-input v-model="data.user" style="max-width: 260px" placeholder="user">
                <template #prepend>账号</template>
            </el-input>
            <el-input v-model="data.password" style="max-width: 260px" placeholder="password" show-password>
                <template #prepend>密码</template>
            </el-input>
            <div>
                <el-button type="primary" @click="greet(data)" style="width: 125px">
                    连接数据库
                </el-button>
                <el-button type="primary" @click="setGreet" style="width: 125px">
                    保存配置
                </el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script>
import { ElMessage, ElLoading ,ElMessageBox } from 'element-plus'
import { TestData, SaveData, GetConfig, DeleteConfig } from '../../wailsjs/go/main/App'
export default {
    components: {

    },
    data() {
        return {
            drawer: false,
            multipleSelection: [],
            tableData: [],
            data: {
                name: '',
                dataType: '',
                host: '',
                port: '',
                dbname: '',
                user: 'root',
                password: ''
            },
            options: [
                {
                    value: 'mysql',
                    label: 'MySql',
                }, {
                    value: 'postgres',
                    label: 'PostgreSQL',
                }, {
                    value: 'oracle',
                    label: 'Oracle',
                }
            ]
        }
    },
    methods: {
        getList(){
            GetConfig().then(result => {
                this.tableData = result
            })
        },
        greet(data) {
            if (data.dataType == '' || data.host == '' || data.port == '' || data.dbname == '' || data.user == '' || data.password == '') {
                ElMessage({
                    showClose: true,
                    message: '请填写完整的信息',
                    type: 'warning',
                })
                return
            }
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            if (data.dataType == "mysql") {
                data.dataUrl = data.user + ":" + data.password + "@(" + data.host + ":" + data.port + ")/" + data.dbname + "?charset=utf8mb4&parseTime=True&loc=Local"
            } else if (data.dataType == "postgres") {
                data.dataUrl = "user=" + data.user + " password=" + data.password + " host=" + data.host + " port=" + data.port + " dbname=" + data.dbname + " sslmode=disable"
            }
            TestData(data).then(result => {
                if (result.code == 200) {
                    ElMessage({
                        showClose: true,
                        message: result.msg,
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        showClose: true,
                        message: result.msg,
                        type: 'error',
                    })
                }
            }).catch(err => {
                console.log(err)
            }).finally(() => {
                loading.close()
            })
        },
        setGreet() {
            var that = this;
            SaveData(this.data).then(result => {
                if (result.code == 200) {
                    ElMessage({
                        showClose: true,
                        message: result.msg,
                        type:'success',
                    }) 
                    that.drawer=false;
                    that.getList();
                } 
            })
            
        },
        tableRowClassName ( rowIndex){
            if (rowIndex === 1) {
                return 'warning-row'
            } else if (rowIndex === 3) {
                return 'success-row'
            }
            return ''
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 删除
        onRemove(){
            var List = []
            var names = ""
            for (let i = 0; i < this.multipleSelection.length; i++) {
                List.push(this.multipleSelection[i].id)
                if(names == ""){
                    names = this.multipleSelection[i].name
                }else{
                    names = names + "," + this.multipleSelection[i].name
                }
            }
            console.log(List)
            var that = this;
            ElMessageBox.confirm('确定删除'+names+ '吗?', '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
            .then(() => {
                DeleteConfig(List).then(result => {
                    if (result.code == 200) {
                        ElMessage({
                            showClose: true,
                            message: result.msg,
                            type:'success',
                        })
                        that.multipleSelection = [];
                        that.getList();
                    }
                })
                
            })
            .catch(() => {

            })

        }
    },
    mounted() {
        this.getList();
    }
}
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.dataSource {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>